<template>
  <!-- 有子集 -->
  <el-table-column v-if="item.children" :label="item.label" v-bind="{ align: 'center', ...item }">
    <MyTableColumn :item="item" v-for="(item, index) of item.children" :key="index">
      <template v-if="item.isSlot" v-slot:[item.prop]="{ row, index }">
        <slot :name="item.prop" :row="row" :index="index" :column="item.prop"> </slot>
      </template>
    </MyTableColumn>
  </el-table-column>

  <!-- isSlot为true -->
  <el-table-column
    v-else-if="!item.children && item.isSlot"
    :label="item.label"
    :prop="item.prop"
    :key="item.index"
    v-bind="{ align: 'center', ...item }"
  >
    <template slot-scope="{ row, $index }">
      <slot :name="item.prop" v-if="item.isSlot" :row="row" :index="$index" :column="item.prop">
        插槽默认内容MyTableColumn</slot
      >
    </template>
  </el-table-column>

  <!-- 无isSlot -->
  <el-table-column
    v-else-if="!item.children && !item.isSlot"
    :label="item.label"
    :prop="item.prop"
    :key="item.index"
    v-bind="{ align: 'center', ...item }"
  >
  </el-table-column>
</template>

<script>
export default {
  name: 'MyTableColumn',
  components: {},
  props: ['item'],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {},
  methods: {},
};
</script>

<style scoped lang="less"></style>
